<template>
  <div class="desc-wrapper">
    <a-tabs type="card" :activeKey="activeDescKey" @change="changeDesc">
      <a-tab-pane key="detail" tab="详情介绍">
        <a-collapse expand-icon-position="right" defaultActiveKey="1">
          <a-collapse-panel key="1" header="参数信息">
            <template v-for="(param,index) in goodsParamsValueList">
              <desc-item v-if="param.name" :key="param.code" :style="{'margin-bottom':index===goodsParamsValueList.length-1?'0':'10px'}" :class="{'border-none':index===goodsParamsValueList.length-1}"  :title="param.name">
              <div slot="content"> {{ param.valueName }} </div>
            </desc-item>
            </template>
          </a-collapse-panel>
        </a-collapse>
        <div class="detail-content" v-html="detail"></div>
      </a-tab-pane>
      <!-- deliveryForm==='2' -->
      <a-tab-pane key="api" tab="API接口" v-if="deliveryForm==='2'">
        <div class="api-name-wrapper">
          <div class="api-name-div">
            <div class="api-name" v-for="(item,index) in apiList" :key="index"
                 :class="{'active':activeApiIndex === index}" @click="changeApi(item,index)">
              {{ item.chineseName }}
            </div>
          </div>
        </div>
        <desc-item title="接口信息">
          <!-- <div slot="action" class="api-action"> -->
            <!-- <a-icon type="cloud-sync"/> -->
            <!-- <span>在线测试</span> -->
          <!-- </div> -->
          <div slot="content">
            <a-descriptions class="custom-desc" bordered :column="1" size="small">
              <a-descriptions-item label="接口英文名称：">{{ currentApi.englishName }}</a-descriptions-item>
              <a-descriptions-item label="接口描述：">{{ currentApi.apiDesc || '-' }}</a-descriptions-item>
              <a-descriptions-item label="URL：">{{ currentApi.externalUrlAddress }}</a-descriptions-item>
              <a-descriptions-item label="PATH：">{{ currentApi.path }}</a-descriptions-item>
              <a-descriptions-item label="返回参数格式：">{{ currentApi.respondFormat }}</a-descriptions-item>
              <a-descriptions-item label="请求方式：">{{ currentApi.callMode }} {{ currentApi.submissionMethod }}
              </a-descriptions-item>
              <!--              <a-descriptions-item label="请求示例：">-->
              <!--                https://szjyjt.card.com/youhuoBeijing/cardid?cardNo=150429198407091210&realName=徐天宇&appkey=-->
              <!--                <span class="action">您申请的APPKEY</span>-->
              <!--              </a-descriptions-item>-->
            </a-descriptions>
          </div>
        </desc-item>
        <desc-item title="请求参数">
          <div slot="content">
            <table class="custom-table">
              <tr>
                <td width="10%">序号</td>
                <td width="18%">参数</td>
                <td width="18%">类型</td>
                <td width="18%">是否必填</td>
                <td width="18%">说明</td>
                <td width="18%">示例值</td>
              </tr>
            </table>
            <table class="custom-table">
              <tr v-for="(reqParam,index) in reqParamList" :key="reqParam.id">
                <td width="10%">{{ index + 1 }}</td>
                <td width="18%">{{ reqParam.paramName }}</td>
                <td width="18%">{{ paramTypeMap[reqParam.paramType] }}</td>
                <td width="18%">{{ paramMustMap[reqParam.must] }}</td>
                <td width="18%">{{ reqParam.remark }}</td>
                <td width="18%">{{ reqParam.exampleValue }}</td>
              </tr>
            </table>
          </div>
        </desc-item>
        <desc-item title="响应参数">
          <div slot="content">
            <table class="custom-table">
              <tr>
                <td width="10%">序号</td>
                <td width="18%">参数</td>
                <td width="18%">类型</td>
                <td width="36%">说明</td>
                <td width="18%">示例值</td>
              </tr>
            </table>
            <table class="custom-table">
              <tr v-for="(resParam,index) in resParamList" :key="resParam.id">
                <td width="10%">{{ index + 1 }}</td>
                <td width="18%">{{ resParam.paramName }}</td>
                <td width="18%">{{ paramTypeMap[resParam.paramType] }}</td>
                <td width="36%">{{ resParam.remark }}</td>
                <td width="18%">{{ resParam.exampleValue }}</td>
              </tr>
            </table>
          </div>
        </desc-item>
        <desc-item title="返回状态码说明">
          <div slot="content">
            <table class="custom-table">
              <tr style="background: #FAFAFA;">
                <td v-for="item in statusColumns" :key="item.dataIndex" :width="item.width">{{ item.title }}</td>
              </tr>
              <tr v-for="(item,index) in statusList" :key="index">
                <td v-for="column in statusColumns" :width="item.width">
                  <template v-if="column.slot">
                    <div v-if="column.slot==='success'">
                      {{ item[column.dataIndex] === 1 ? '是' : '否' }}
                    </div>
                  </template>
                  <template v-else>
                    {{ !column.dataIndex ? (index + 1) : item[column.dataIndex] }}
                  </template>
                </td>
              </tr>
            </table>
          </div>
        </desc-item>
        <desc-item title="返回示例">
          <div slot="content" style="line-height: 20px;">
            <json-viewer :value="currentRespondContent" copyable sort :expand-depth="4" @copied="copied">
              <div slot="copy">
                复制
              </div>
            </json-viewer>
          </div>
        </desc-item>
      </a-tab-pane>
      <a-tab-pane key="application" tab="应用配置" v-if="deliveryForm==='4'">
        <desc-item title="应用程序信息">
          <div slot="content">
            <a-descriptions class="custom-desc" bordered :column="1" size="small">
              <a-descriptions-item label="应用程序名称：">{{ goodsApplicationConf.appName }}</a-descriptions-item>
              <a-descriptions-item label="版本：">{{ goodsApplicationConf.appVersion }}</a-descriptions-item>
              <a-descriptions-item label="应用程序地址：">{{ goodsApplicationConf.appUrl }}</a-descriptions-item>
              <a-descriptions-item label="备注说明：">{{ goodsApplicationConf.appDesc || '-' }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </desc-item>
      </a-tab-pane>
      <!--      <a-tab-pane key="example" tab="客户案例">-->
      <!--        Content of Tab Pane 3-->
      <!--      </a-tab-pane>-->
      <a-tab-pane key="evaluate" tab="用户评价">
        <evaluates :id="id" :goods-name="goodsName"></evaluates>
      </a-tab-pane>
      <a-tab-pane key="record" tab="成交记录">
        <purchase-records :id="id"></purchase-records>
      </a-tab-pane>
       <a-tab-pane key="certificate" tab="产品资质" v-if="isOrgan">
        <certificate :id="id"></certificate>
      </a-tab-pane>
      <a-tab-pane key="third" tab="三方评估意见">
        <a-row style="margin: 10px 0">
          <a-col :span="2" :offset="1">评估意见：</a-col>
          <a-col :span="14">{{ goodsEstimate.estimateDesc }}</a-col>
        </a-row>
        <a-row style="margin: 10px 0;display: flex;align-items: center;" v-if="goodsEstimate.fileName">
          <a-col :span="2" :offset="1">评估附件：</a-col>
          <a-col :span="14">
            {{goodsEstimate.fileName}}
            <span v-if="goodsEstimate.fileUrl">
              <a-button v-if="canPreview(goodsEstimate.fileUrl)" type="link" @click="toPreview(goodsEstimate)">预览</a-button>
              <a-button type="link" @click="toDownload(goodsEstimate.fileUrl,goodsEstimate.fileName)">下载</a-button>
            </span>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import DescItem from './DescItem'
import {paramTypeMap, paramMustMap} from '../config'
import PurchaseRecords from './PurchaseRecords'
import Evaluates from './Evaluates'
import Certificate from './Certificate'

export default {
  name: 'Description',
  components: {
    Certificate,
    Evaluates,
    PurchaseRecords,
    DescItem
  },
  props: {
    isOrgan:{
      type: Boolean,
      default: false
    },
    id: '',
    activeDescKey: '',
    detail: '',
    goodsName: '',
    deliveryForm: '',
    goodsApplicationConf: {
      type: Object,
      default: () => {
      }
    },
    goodsEstimate: {
      type: Object,
      default: () => {
      }
    },
    goodsParamsValueList: {
      type: Array,
      default: () => []
    },
    apiList: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    currentApi () {
      return this.apiList.length > 0 ? this.apiList[this.activeApiIndex] : {}
    },
    currentRespondContent() {
      let content = this.currentApi.respondContent
      try {
        return JSON.parse(content)
      } catch (e) {
        console.log(e)
        return content
      }
    },
    reqParamList () {
      return this.apiList.length > 0 ? this.apiList[this.activeApiIndex].goodsApiConfParamList.filter(item => item.type === 1) : []
    },
    resParamList () {
      return this.apiList.length > 0 ? this.apiList[this.activeApiIndex].goodsApiConfParamList.filter(item => item.type === 2) : []
    },
    statusList () {
      return this.apiList.length > 0 ? this.apiList[this.activeApiIndex].goodsApiConfStatusList : []
    }
  },
  data () {
    return {
      activeApiIndex: 0,
      activeParamKey: '1',
      paramTypeMap: paramTypeMap,
      paramMustMap: paramMustMap,
      statusColumns: [
        {
          title: '序号',
          width: '10%'
        },
        {
          title: '状态码',
          dataIndex: 'statusCode',
          width: '18%'
        },
        {
          title: '状态值',
          dataIndex: 'statusValue',
          width: '18%'
        },
        {
          title: '是否返回成功',
          dataIndex: 'success',
          slot: 'success',
          width: '18%'
        },
        {
          title: '说明',
          dataIndex: 'remark',
          width: '36%'
        }
      ]
    }
  },
  methods: {
    changeDesc (e) {
      this.$emit('change', e)
    },
    changeApi (item, index) {
      this.activeApiIndex = index
    },
    copied (e) {
      const text = e.text
      this.$message.success('复制成功')
    },
    canPreview(fileUrl){
      return fileUrl.endsWith('.png') || fileUrl.endsWith('.jpg') || fileUrl.endsWith('.jpeg') || fileUrl.endsWith('.gif') || fileUrl.endsWith('.ico') || fileUrl.endsWith('.svg');
    },
    toPreview(file) {
      if (file.fileUrl) {
        if (canPreview(file.fileUrl)) {
          // 可以在线预览
          window.open(file.fileUrl)
        } else {
          this.toDownload(file)
        }
      } else {
        this.$message.error('文件地址路径不完整')
      }
    },
    /**
     * 重命名下载
     * @param  {String} url 目标文件地址
     */
     toDownload(url,filename) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) this.saveAs(xhr.response, filename);
      };
      xhr.onerror = () =>this.$message.error('下载地址路径错误')
      xhr.send();
    },
    /**
     * 保存
     * @param  {Blob} blob
     * @param  {String} filename 想要保存的文件名称
     */
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement('a');
        var body = document.querySelector('body');
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        link.style.display = 'none';
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      };
    }
  }
}
</script>

<style scoped lang="scss">
.desc-wrapper {
  margin-top: 40px;

  >>> .ant-collapse {
    border-color: #e2e2e2;
  }

  >>> .ant-collapse-item {
    border-color: #e2e2e2;
  }

  >>> .ant-collapse-content {
    border-color: #e2e2e2;
  }

  >>> .ant-collapse-header {
    background: #fafafa;
    padding: 8px 16px;
    font-size: 13px;
  }

  >>> .ant-collapse-content-box {
    padding: 10px;
  }

  .border-none {
    >>> .desc-content {
      border: none;
      padding-bottom: 4px;
    }
  }

  .detail-content {
    margin-top: 16px;

    >>> img {
      max-width: 100%;
    }
  }
}

.charge-dimension {
  margin-bottom: 14px;
}

.custom-table {
  width: 100%;
  border: 1px solid #e2e2e2;
  border-top: none;

  &:first-child {
    border-top: 1px solid #e2e2e2;
  }

  tr, td {
    min-height: 40px;
    text-align: center;
    line-height: 20px;
    word-break: break-all;
  }

  tr {
    border-bottom: 1px solid #e2e2e2;

    &:last-child {
      border-bottom: none;
    }
  }

  td {
    padding: 10px;
    border-right: 1px solid #e2e2e2;

    &:last-child {
      border-right: none;
    }

    .param-type {
      position: relative;

      &:before {
        position: absolute;
        content: ' ';
        top: 18px;
        left: -14px;
        border-radius: 50%;
        width: 4px;
        height: 4px;
        background: #0078FE;
      }
    }
  }
}

.api-name-wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 10px;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #18171723;
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  .api-name-div {
    display: flex;
    width: fit-content;

    .api-name {
      background: #FAFAFA;
      padding: 10px;
      width: 200px;
      border-radius: 4px;
      border: 1px solid #E2E2E2;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #646464;
      line-height: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      text-align: center;
      margin-left: 20px;

      &:first-child {
        margin-left: 0;
      }

      &:hover {
        border-color: #1785FF;
        background: #E8F3FF;
        color: #1785FF;
      }

      &.active {
        border-color: #1785FF;
        background: #E8F3FF;
        color: #1785FF;
      }
    }
  }
}

.api-action {
  display: flex;
  align-items: center;
  cursor: pointer;

  span {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #1785FF;
    line-height: 12px;
    margin-left: 4px;
  }

  i {
    color: #1785FF;
    font-size: 14px;
  }
}

.action {
  color: #1785FF;
  cursor: pointer;
}

.custom-desc {
  /deep/ .ant-descriptions-item-label {
    width: 120px !important;
    text-align: right !important;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #323232;
  }

  /deep/ .ant-descriptions-item-content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #323232;
  }
}

.desc-title {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
  font-weight: 500;
  color: #323232;
  margin-bottom: 10px;
  line-height: 14px;
}
</style>
